```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tomcat CORS配置指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero-bg {
            background: linear-gradient(135deg, #4a6cf7 0%, #2541b2 100%);
        }
        .card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(0,0,0,0.1);
        }
        .code-block {
            background-color: #f8f9fa;
            border-left: 4px solid #4a6cf7;
        }
        .step-icon {
            width: 60px;
            height: 60px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(74, 108, 247, 0.1);
            color: #4a6cf7;
            font-size: 24px;
            margin-right: 20px;
            flex-shrink: 0;
        }
        .hover-grow {
            transition: transform 0.2s;
        }
        .hover-grow:hover {
            transform: scale(1.05);
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero-bg text-white py-20 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-10 md:mb-0">
                    <h1 class="text-4xl md:text-5xl font-bold mb-4">Tomcat CORS配置指南</h1>
                    <p class="text-xl opacity-90 mb-8">跨越同源策略限制，实现安全可控的跨域资源共享</p>
                    <div class="flex flex-wrap gap-4">
                        <a href="#implementation" class="bg-white text-blue-600 hover:bg-blue-50 px-6 py-3 rounded-lg font-medium shadow-md transition-colors duration-300">配置方法</a>
                        <a href="#concepts" class="border-2 border-white text-white hover:bg-white hover:text-blue-600 px-6 py-3 rounded-lg font-medium shadow-md transition-colors duration-300">核心概念</a>
                    </div>
                </div>
                <div class="md:w-1/2 flex justify-center">
                    <div class="w-full max-w-md">
                        <div class="mermaid">
                            graph TD
                                A[客户端请求] -->|跨域请求| B(Tomcat服务器)
                                B --> C{检查CORS配置}
                                C -->|允许| D[返回资源]
                                C -->|拒绝| E[返回403错误]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="max-w-6xl mx-auto px-4 py-16">
        <!-- What is CORS -->
        <section class="mb-20">
            <div class="text-center mb-12">
                <h2 class="text-3xl font-bold mb-4">什么是CORS？</h2>
                <p class="max-w-3xl mx-auto text-gray-600">跨域资源共享(Cross-Origin Resource Sharing)是一种机制，它允许网页从不同的域请求受限资源</p>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="text-blue-500 mb-4 text-3xl"><i class="fas fa-lock"></i></div>
                    <h3 class="text-xl font-bold mb-3">同源策略</h3>
                    <p class="text-gray-600">浏览器安全机制，限制不同源的脚本交互以保护用户数据安全</p>
                </div>
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="text-blue-500 mb-4 text-3xl"><i class="fas fa-exchange-alt"></i></div>
                    <h3 class="text-xl font-bold mb-3">CORS机制</h3>
                    <p class="text-gray-600">通过HTTP头部协商，允许服务器声明哪些源可以访问资源</p>
                </div>
                <div class="card bg-white p-8 rounded-xl shadow-md">
                    <div class="text-blue-500 mb-4 text-3xl"><i class="fas fa-shield-alt"></i></div>
                    <h3 class="text-xl font-bold mb-3">安全控制</h3>
                    <p class="text-gray-600">服务器端可控的跨域访问，平衡安全性和功能性需求</p>
                </div>
            </div>
        </section>

        <!-- Implementation -->
        <section id="implementation" class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center">Tomcat CORS配置方法</h2>
            
            <div class="mb-16">
                <div class="flex items-start mb-8">
                    <div class="step-icon hover-grow"><i class="fas fa-filter"></i></div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">1. 通过配置Filter实现CORS</h3>
                        <p class="text-gray-600 mb-4">Tomcat提供了直接配置过滤器(Filter)的方式来处理CORS请求，通常是通过标准的<code class="bg-gray-100 px-2 py-1 rounded">CORSFilter</code>。</p>
                        <div class="code-block p-6 rounded-lg mb-4">
                            <pre class="text-gray-800 overflow-x-auto"><code>
&lt;filter&gt;
  &lt;filter-name&gt;CORS&lt;/filter-name&gt;
  &lt;filter-class&gt;org.apache.catalina.filters.CorsFilter&lt;/filter-class&gt;
&lt;/filter&gt;

&lt;filter-mapping&gt;
  &lt;filter-name&gt;CORS&lt;/filter-name&gt;
  &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
&lt;/filter-mapping&gt;
                            </code></pre>
                        </div>
                        <p class="text-gray-600">将此配置添加到应用的<code class="bg-gray-100 px-2 py-1 rounded">web.xml</code>文件中。</p>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <div class="flex items-start mb-8">
                    <div class="step-icon hover-grow"><i class="fas fa-sliders-h"></i></div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">2. 配置CORS Filter参数</h3>
                        <p class="text-gray-600 mb-4">根据具体需求，<code class="bg-gray-100 px-2 py-1 rounded">CORSFilter</code>支持配置多个参数以控制跨域请求的行为：</p>
                        
                        <div class="grid md:grid-cols-2 gap-6 mb-6">
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2">cors.allowed.origins</h4>
                                <p class="text-gray-600">允许的源，多个用逗号分隔，*表示所有</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2">cors.allowed.methods</h4>
                                <p class="text-gray-600">允许的HTTP方法，如GET,POST,PUT等</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2">cors.allowed.headers</h4>
                                <p class="text-gray-600">允许的请求头，如Content-Type,Authorization等</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2">cors.support.credentials</h4>
                                <p class="text-gray-600">是否允许携带凭据，true/false</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <div class="flex items-start mb-8">
                    <div class="step-icon hover-grow"><i class="fab fa-java"></i></div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">3. 使用Spring框架中的CORS配置</h3>
                        <p class="text-gray-600 mb-4">如果使用Spring框架，可以通过Spring MVC的注解配置实现更加灵活的CORS规则。</p>
                        
                        <div class="grid md:grid-cols-2 gap-6">
                            <div class="code-block p-6 rounded-lg">
                                <h4 class="font-bold mb-3">方法级别配置</h4>
                                <pre class="text-gray-800 overflow-x-auto"><code>
@RestController
@RequestMapping("/api")
public class MyController {
    
    @CrossOrigin(origins = "http://example.com")
    @GetMapping("/data")
    public Data getData() {
        // ...
    }
}
                                </code></pre>
                            </div>
                            <div class="code-block p-6 rounded-lg">
                                <h4 class="font-bold mb-3">全局配置</h4>
                                <pre class="text-gray-800 overflow-x-auto"><code>
@Configuration
public class WebConfig implements WebMvcConfigurer {
    
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**")
            .allowedOrigins("http://example.com")
            .allowedMethods("GET", "POST");
    }
}
                                </code></pre>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="mb-16">
                <div class="flex items-start mb-8">
                    <div class="step-icon hover-grow"><i class="fas fa-server"></i></div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">4. Tomcat 8+的内置CORS支持</h3>
                        <p class="text-gray-600">从Tomcat 8开始，Tomcat内置了CORS支持，管理员可以直接在<code class="bg-gray-100 px-2 py-1 rounded">web.xml</code>中配置跨域支持，而无需额外添加第三方库。</p>
                    </div>
                </div>
            </div>

            <div>
                <div class="flex items-start mb-8">
                    <div class="step-icon hover-grow"><i class="fas fa-bug"></i></div>
                    <div>
                        <h3 class="text-2xl font-bold mb-4">5. 调试与验证</h3>
                        <p class="text-gray-600 mb-4">配置完成后，使用以下工具测试跨域请求：</p>
                        
                        <div class="grid md:grid-cols-3 gap-6">
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2 flex items-center"><i class="fas fa-chrome mr-2"></i>浏览器工具</h4>
                                <p class="text-gray-600">检查Network面板中的请求和响应头</p>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2 flex items-center"><i class="fas fa-terminal mr-2"></i>cURL命令</h4>
                                <pre class="text-gray-800 text-sm">curl -H "Origin: http://example.com" -I http://yourserver.com/api</pre>
                            </div>
                            <div class="bg-white p-6 rounded-lg shadow-sm border border-gray-100">
                                <h4 class="font-bold text-blue-600 mb-2 flex items-center"><i class="fas fa-check-circle mr-2"></i>验证头信息</h4>
                                <ul class="text-gray-600 text-sm list-disc pl-5">
                                    <li>Access-Control-Allow-Origin</li>
                                    <li>Access-Control-Allow-Methods</li>
                                    <li>Access-Control-Allow-Headers</li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Key Concepts -->
        <section id="concepts" class="mb-20 bg-white rounded-xl shadow-md p-8">
            <h2 class="text-3xl font-bold mb-8 text-center">CORS核心概念</h2>
            
            <div class="mb-10">
                <div class="mermaid text-center">
                    graph LR
                        A[简单请求] -->|GET/POST/HEAD<br>简单头部| B[直接发送]
                        C[预检请求] -->|非简单方法/头部| D[OPTIONS预检]
                        D --> E[服务器确认]
                        E -->|允许| F[发送实际请求]
                </div>
            </div>
            
            <div class="grid md:grid-cols-2 gap-8">
                <div>
                    <h3 class="text-xl font-bold mb-4 flex items-center"><i class="fas fa-info-circle text-blue-500 mr-2"></i>简单请求</h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                        <li>使用GET、HEAD或POST方法</li>
                        <li>仅包含简单头部(如Accept、Accept-Language等)</li>
                        <li>Content-Type仅限于application/x-www-form-urlencoded、multipart/form-data或text/plain</li>
                        <li>浏览器直接发送请求并检查响应头</li>
                    </ul>
                </div>
                <div>
                    <h3 class="text-xl font-bold mb-4 flex items-center"><i class="fas fa-shield-alt text-blue-500 mr-2"></i>预检请求</h3>
                    <ul class="list-disc pl-5 space-y-2 text-gray-600">
                        <li>使用PUT、DELETE等非简单方法</li>
                        <li>包含自定义头部</li>
                        <li>Content-Type为application/json等非简单类型</li>
                        <li>浏览器先发送OPTIONS请求进行预检</li>
                        <li>预检通过后才发送实际请求</li>
                    </ul>
                </div>
            </div>
        </section>

        <!-- Best Practices -->
        <section class="mb-20">
            <h2 class="text-3xl font-bold mb-12 text-center">CORS最佳实践</h2>
            
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-blue-500 mb-4 text-2xl"><i class="fas fa-lock"></i></div>
                    <h3 class="text-xl font-bold mb-3">最小权限原则</h3>
                    <p class="text-gray-600">只允许必要的源、方法和头部，避免使用通配符*</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-blue-500 mb-4 text-2xl"><i class="fas fa-key"></i></div>
                    <h3 class="text-xl font-bold mb-3">凭据控制</h3>
                    <p class="text-gray-600">需要携带Cookie或认证信息时，设置<code class="bg-gray-100 px-1 rounded">cors.support.credentials=true</code></p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-blue-500 mb-4 text-2xl"><i class="fas fa-clock"></i></div>
                    <h3 class="text-xl font-bold mb-3">预检缓存</h3>
                    <p class="text-gray-600">通过<code class="bg-gray-100 px-1 rounded">Access-Control-Max-Age</code>减少预检请求次数</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-blue-500 mb-4 text-2xl"><i class="fas fa-filter"></i></div>
                    <h3 class="text-xl font-bold mb-3">灵活配置</h3>
                    <p class="text-gray-600">根据环境(开发/生产)动态调整CORS策略</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-blue-500 mb-4 text-2xl"><i class="fas fa-shield-virus"></i></div>
                    <h3 class="text-xl font-bold mb-3">安全加固</h3>
                    <p class="text-gray-600">结合CSRF保护等其他安全措施</p>
                </div>
                <div class="bg-white p-8 rounded-xl shadow-md border-t-4 border-blue-500">
                    <div class="text-blue-500 mb-4 text-2xl"><i class="fas fa-book"></i></div>
                    <h3 class="text-xl font-bold mb-3">文档记录</h3>
                    <p class="text-gray-600">清晰记录CORS策略，方便团队协作</p>
                </div>
            </div>
        </section>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-12 px-4">
        <div class="max-w-6xl mx-auto">
            <div class="text-center">
                <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                <p class="mb-6">探索技术奥秘，分享开发经验</p>
                <div class="flex justify-center space-x-4 mb-6">
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:text-blue-300 transition-colors" target="_blank">
                        <i class="fas fa-globe text-2xl"></i>
                    </a>
                </div>
                <p class="text-sm text-gray-500">
                    &copy; 2023 技术小馆. 保留所有权利.
                    <br>
                    <a href="http://www.yuque.com/jtostring" class="text-blue-400 hover:underline" target="_blank">http://www.yuque.com/jtostring</a>
                </p>
            </div>
        </div>
    </footer>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            fontFamily: 'Noto Sans SC, sans-serif',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```